<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8" />
  <title>　</title>
  <link rel="icon" href="images/print3.png" type="image/x-icon" />
  <style type="text/css">
    body {
      margin: 0 8px;
      text-align: center;
      font-family: cursive;
      font-size: 14px;
    }
    .title {
      display: inline;
    }
    .main {
      width: 100%;
      border-collapse: collapse;
      border: 1px solid black;
    }
    .main td, th {
      border: 1px solid black;
    }
    pre {
      font-family: cursive;
      margin: auto;
    }
    .pageNum {
      text-align: right;
    }
    .row {
      height: 20px;
    }
    font {
      font-family: cursive;
    }
  </style>
  <script charset="utf-8" language="JavaScript" type="text/javascript">
    window.onload = function () {
      var data = localStorage.getItem('goodsData');
      if (!data) {
        console.log('数据不能为空');
        return;
      }

      var err = '';
      try {
        data = JSON.parse(data);
        console.log(data);
      } catch (e) {
        console.log('数据格式不正确', e);
        err = e;
      }
      if (err) return;

      var act = localStorage.getItem('action');
      if (!act) {
        console.log('动作不能为空');
        return;
      }
      console.log('action:', act);

      var classifyName = '';
      var dom = document.getElementById('pages');
      var pageHtml = dom.innerHTML;
      var html = '';
      var pageSize = 41;

      for (var i = 0, page = 0, count = 0; i < data.length; i += 1, count += 1) {
        var row = data[i];
        if (classifyName !== row.classifyPName) {
          classifyName = row.classifyPName;
          html += '<tr>' +
            '<td colspan="5" align="left" class="row">' +
            '<pre><font face="楷体">' + row.classifyPName + '</font></pre>' +
            '</td>' +
            '</tr>';
          count += 1;
        }
        html += '<tr>' +
          '<td class="row" align="center"><font face="楷体">' + (i + 1) + '</font></td>' +
          '<td align="left"><pre><font face="楷体">' + row.classifyName + '</font></pre></td>' +
          '<td align="left"><font face="楷体">' + row.brand + ' ' + row.specName + '</font></td>' +
          '<td align="center"><pre><font face="楷体">' + row.amount1 + row.unit1 + '</font></pre></td>' +
          '<td align="left"><pre><font face="楷体">' + row.placePath + '</font></pre></td>' +
          '</tr>';

        if (count && (count + 1) % pageSize === 0) {
          dom = document.getElementsByClassName('main');
          dom[page].getElementsByTagName('tbody')[0].innerHTML += html;
          page += 1;
          html = '';
          dom = document.getElementById('pages');
          dom.innerHTML += pageHtml;
        }
      }
      if (html !== '') {
        dom = document.getElementsByClassName('main');
        dom[page].getElementsByTagName('tbody')[0].innerHTML += html;
        var n0 = dom[0].getElementsByTagName('tr').length;
        var n1 = dom[dom.length - 1].getElementsByTagName('tr').length;
        dom = document.getElementsByClassName('pageNum');
        dom[page].style.marginTop = (n0 - n1) * 23 + 'px';
      }

      dom = document.getElementsByClassName('pageNum');
      for (var i = 0; i < dom.length; i += 1) {
        dom[i].children[0].textContent = '第' + (i + 1) + '页，共' + dom.length + '页';
      }

      if (act === 'print') window.print();
      else if (act === 'export') {
        // 参考自：HTML中的table导出为Excel文件
        // https://www.cnblogs.com/hill-foryou/p/9224778.html
        var uri = 'data:application/vnd.ms-excel;base64,';
        var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>';
        var base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) };
        var format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) };

        dom = document.getElementById('pages');
        var content = { worksheet: '物品台帐', table: dom.innerHTML };

        var a = document.createElement('a');
        a.href = uri + base64(format(template, content));
        var now = new Date();
        a.download = '物品台帐' + new Date().toISOString().split('T')[0] + '.xls';
        a.click();
      }
    }
  </script>
</head>
<body>
<div id="pages">
  <table class="main">
    <caption>
      <h2 class="title">
        <font face="楷体">物品台帐</font>
      </h2>
      <br /><br />
    </caption>
    <thead>
      <tr>
        <th width="72" class="row"><pre><font face="楷体">序号</font></pre></th>
        <th><pre><font face="楷体">物品名称</font></pre></th>
        <th><pre><font face="楷体">品牌 规格型号</font></pre></th>
        <th><pre><font face="楷体">库存数量</font></pre></th>
        <th><pre><font face="楷体">存放位置</font></pre></th>
      </tr>
    </thead>
    <tbody />
  </table>
  <div class="pageNum" align="right"><font face="楷体"></font></div>
</div>
</body>
</html>
